<script setup lang="ts">
import { onMounted, Ref, ref } from "vue";
import { SessionInfo, FaqItem, RoleEnum } from "@/models/@types.ts";
import Markdown from "@/components/Markdown.vue";
import Interactive from "@/components/chat/Interactive.vue";
import { workService } from "@/services/work.service.ts";
import { getUuid } from "@/utils/common.methods.ts";
import { appContext } from "@/models/app.context.ts";
import { appRef } from "@/models/app.ref";

const helpOptions = ref([
  {
    title: '在问是什么？',
    content: '这是一个免费的在线聊天工具，旨在让用户更方便地享受科技带来的便利。用户可以使用我们的工具来获取答案、寻求建议、进行翻译和计算等等。这是由一位个人开发者发起的，开发团队全部无偿兼职，水平有限，如遇到问题，欢迎大家一起讨论技术问题和提出技术指导，让我们共同进步。\n' +
      '\n' +
      '我们采用了现在最流行的模型提供聊天服务，用户可以直接访问链接使用此工具。我们不会要求用户进行任何登录操作，也不会在后台保留任何用户隐私数据。这样做虽然可能会带来一些不便，但我们坚信保护用户隐私才是正确的做法。'
  },
  {
    title: "在问为何免费？",
    content: "起初，我仅仅出于对我和家人的便利着想，开始了这个项目。而我读书期间和家人的联系越来越少，陪伴也越来越缺乏。我希望他们能够接触到这一新鲜事物，但市场上缺乏一款可靠且易用的工具来为他们提供这个体验。因此，我首先开发了一个适合父母使用的版本，字号很大...[点此了解在问免费缘由](https://gitee.com/xu-zhanwei/chatanywhere/blob/master/purpose.md)"
  },
  {
    title: "如何掌握更多在问的使用技巧？",
    content: "想了解更多在问的使用技巧，掌握第一手在问的更新动态，可以关注我们的公众号：@屋后的小院，我们会不定期发布在问的使用技巧和更新动态。或者关于我们的b站和抖音账号：@在问-许三多，@zaiwen。晚七点半准时开播。" + '\n' +
      '    <img src="https://bak.zaiwen.org.cn/images/weixin.jpg" alt="在问公众号" width="256"><img src="https://bak.zaiwen.org.cn/images/bilibili.jpg" alt="在问b站" width="256"><img src="https://bak.zaiwen.org.cn/images/douyin.jpg" alt="在问抖音" width="256">    '
  },
  {
    title: '如何收藏官网',
    content: '要收藏网站，您可以在浏览器中做如下操作：\n' +
      '\n' +
      '打开您喜欢的浏览器（如Chrome、Firefox、Safari等）；\n' +
      '在浏览器中输入并进入您想要收藏的网站：https://zaiwen.top；\n' +
      '在浏览器工具栏上找到“书签”（有时候显示为星号或书签图标），然后点击“添加书签”或“收藏该页”；\n' +
      '您可以选择将其添加到书签栏上，或者创建一个新的书签文件夹将其保存；\n' +
      '点击“保存”或“确定”以完成收藏。\n' +
      '此时，您就已经成功收藏了官网https://zaiwen.top。下次想要再次访问它时，只需点击浏览器书签中的链接即可。'
  },
  {
    title: '文档分析-文档无法上传？',
    content: `刷新重试 网络问题 后端被屏蔽 目前只支持最大30M的文件，文件太大，超过限制了`
  },
  {
    title: '3.5和4.0接口回答自己是3.0',
    content: `接口模型自己就是这么认为的，但其实调的就是3.5的接口。而且3.0和3.5其实本质上模型的大小是一样的，3.0是不会聊天儿的。3.5就是在3.0的大模型基础上对聊天功能做了优化`
  },
  {
    title: '这个3.5和4.0是Gpt-3.5/4.0吗？',
    content: `是的，我们调用的是OpenAI官方api接口, 3.5就是gpt-3.5-turbo，4.0就是gpt-4和gpt-4-turbo`
  },
  {
    title: '这个4.0，4.0-128k，4.0识图都是gpt-4模型吗？',
    content: `是的，都是,分别api是gpt-4, gpt-4-1106-preview, gpt-4-vision-preview`
  },
  {
    title: '这个4.0，4.0-128k，4.0-识图（3.5，3.5-16k，3.5-识图）区别是什么？128k(16k)是什么意思？',
    content: `4.0，4.0-128k所支持的可输入文本大小不同，4.0-128k支持128k的上下文输入，4.0-识图可以上传图片进行分析`
  },
  {
    title: '已经过了24小时，4.0还是用不了',
    content: `家庭宽带的IP是公用的，也就是说别人可能和你公用一个IP。我们的限制目前是按照IP限制的，所以和你相同IP的别人使用过了你就用不了`
  },
  {
    title: '图片生成错误',
    content: `网络问题 后端出错`
  },
  {
    title: '在问不能分析图片吗？',
    content: `在问可以分析图片，在高效问答中选择gemini-识图或4.0-识图，之后在输入框右下角点击图片图标上传需要分析的图片，再正常问答即可。`
  },
  {
    title: '在问有app吗（在问有小程序吗）？',
    content: `目前还没有，您可以在手机端微信点击zaiwen.top进入网站,之后将网站设为浮窗，这样在微信中右划即可方便快速地调出`
  },
  {
    title: '在问能做ppt吗？',
    content: `目前不行，ppt模板需要版权且现在市面上已经有部分专门做此功能的网站`
  },
  {
    title: '在问哪些项目是免费的，哪些是收费的？',
    content: `高效问答中的4.0模型和随心作画里的dall-e-3模型每个IP每24小时可免费使用一次，之后需要收费，其他所有模型都免费，一般情况下其他模型是够用的。收费是因为对应模型调用成本过高，在问期望能让更多人有更好的生成式AI体验，不得已进行收费。是否需要购买4.0和dall-e-3则建议根据自己的实际情况评估一下你是不是真的需要这两个模型。在购买之前请务必仔细阅读使用说明，不要冲动消费。`
  },
  {
    title: '我买了卡密输入之后怎么没用？',
    content: `请确保您的卡密前后中间都没有空格，如果有空格则无法正常使用 后端出错，可以稍后重试或者向在问反馈。因为没有连上后端而失败的请求不会计费。`
  },
  {
    title: '随心作画为什么改变不了尺寸',
    content: `只有前3个模型可以改变尺寸，别的模型不行`
  },
  {
    title: '随心作画的图生图不管用',
    content: `目前只有通用模型支持图生图功能，其他模型不行`
  },
  {
    title: '随心作画的提示词怎么写？',
    content: `prompt使用提醒 在画廊中找找同款`
  },
  {
    title: '在问能作图（文生图）吗？',
    content: `可以，您可以点击随心作画进行作图`
  },
  {
    title: '在问能分析文件吗？',
    content: `可以，在文档分析里上传您的文件之后即可进行分析`
  },
  {
    title: '怎么刷新对话？',
    content: `点击对话上方的重新获取按钮即可`
  },
  {
    title: '在哪里选择不同的模型？',
    content: `在输入框的上方即可选择`
  },
  {
    title: '随心作画的图片怎么保存？',
    content: `点击保存按钮即可`
  },
  {
    title: '手机端在哪里新建会话？',
    content: `点击左上角三条横线即可打开和关闭新建会话界面`
  },
  {
    title: '文档分析/随心作画/思维导图在手机端的哪里？',
    content: `点击左上角三条横线即可在左侧选择其他功能`
  },
  {
    title: '在问不能分析图片吗？',
    content: `可以的，需要您选择gemini_识图或者4.0_识图模型`
  },
] as FaqItem[])
const helps = ref([] as SessionInfo[])

const textarea = ref('' as string)
const isMobil = ref(false as boolean)
onMounted(() => {
  isMobil.value = appContext.system.data.viewWidth < 1000;
})
const isSend = ref(false as boolean)

const chunk = ref('')

async function sendMessage(value: string = textarea.value): Promise<void> {
  if (!value) return;
  isSend.value = true;
  textarea.value = '';
  const session: SessionInfo = {
    uid: getUuid(),
    role: RoleEnum.User,
    timestamp: Date.now(),
    richtext: value,
    quote: '',
    assets: []
  };
  helps.value.push(session)

  const uuid = getUuid();
  workService.stream(uuid, 'https://www.cwjiaoyu.cn/fileask/fileApi/share/ai_customer_service', { "question": value }, data => {
    console.log(data)
    chunk.value += data
  }, (data: string) => {
    console.log(data)
    const session2 = ref({
      uid: uuid,
      role: RoleEnum.AI,
      timestamp: Date.now(),
      richtext: data,
      quote: '',
      assets: []
    })
    helps.value.push(session2.value)
    isSend.value = false
    chunk.value = ''
  },
    (err) => {
      const session2 = ref({
        uid: uuid,
        role: RoleEnum.Tip,
        timestamp: Date.now(),
        richtext: err,
        quote: '',
        assets: []
      })
      helps.value.push(session2.value)
    });
}

/**
 * 是否展示弹框
 */
const showModal = ref(false)


</script>

<template>
  <div class="bar">
    <OperationBar v-if="appRef.isOpen" />
  </div>
  <div class="page">
    <div class="title">FAQ
      <a-link href="https://zaiwen-chattests.feishu.cn/docx/AvFGd6KX8o8U7QxjY63c0jBGnlT" icon>查看完整指南</a-link>
    </div>
    <a-divider />
    <a-collapse class="list" :default-active-key="[0]">
      <a-collapse-item class="item" v-for="(item, index) in helpOptions" :header="item.title" :key="index">
        <Markdown :source="item.content" />
      </a-collapse-item>
    </a-collapse>

    <div class="service">
      <icon-customer-service :size="36" @click="showModal = true" />
    </div>

    <div class="service_modal zoomIn animated" v-if="showModal">
      <div class="close_container" @click="showModal = false">
        <icon-close class="close" :size="24" />
      </div>
      <div class="inner-chat">
        <interactive :sessions="helps"
          :style="{ height: isMobil ? '70vh' : '400px', width: isMobil ? 'calc(100vw - 20px)' : '100%', paddingBottom: isMobil ? '70px' : '0' }"
          :is-send="isSend" :chunk="chunk" @send="sendMessage" prologue="欢迎来到在问智能客服，你有什么问题，请告诉我吧。" />

        <div class="flex bottom">
          <div class="textarea">
            <a-textarea v-model="textarea"
              :auto-size="isMobil ? { minRows: 2, maxRows: 15 } : { minRows: 2, maxRows: 500 }" style="flex: 1"
              placeholder="粘贴或输入你的需求，如: 请帮我看看文章有没有问题，附上文章的内容 （Ctrl + Enter = 发送，Enter = 换行）"
              @keydown.ctrl.enter="sendMessage(textarea)" />
          </div>

          <a-button class="send" type="primary" @click.stop="sendMessage(textarea)" :loading="isSend">
            <template #icon>
              <icon-send />
            </template>
          </a-button>

        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bar {
  display: none;

  @media screen and (max-width: 1200px) {
    display: block;
  }
}

.page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 80px 20px;
  max-width: 936px;
  margin: 0 auto;
  overflow: auto;

  .list {

    .item {
      color: var(--color-neutral-6);
    }
  }

  .title {

    font-size: 3rem;
    line-height: 3.5rem;
    margin: 0 auto 1rem;
    font-weight: bold;
    color: var(--color-neutral-10);
  }
}

::v-deep {

  .arco-collapse-item-content,
  .arco-collapse-item-content-box {
    padding: 0;
  }
}

.service {
  position: fixed;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 20px;
  bottom: 20px;
  background-color: var(--color-bg-2);
  border-radius: 50%;
  border: 1px #ccc solid;
  cursor: pointer;
}

.service_modal {
  position: fixed;
  right: 10px;
  bottom: 20px;
  height: 500px;
  width: 375px;
  background-color: var(--color-bg-2);
  border-radius: 14px 14px 0 0;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.16);

  @media screen and (max-width: 1200px) {
    width: calc(100vw - 20px);
    bottom: 0;
    height: 70vh;
  }

  .close_container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 34px;
    border-radius: 14px 14px 0 0;
    background: rgb(var(--arcoblue-4));
    cursor: pointer;

    .close {
      position: absolute;
      top: 5px;
      right: 10px;
      color: var(--color-neutral-8);
    }


  }

  .inner-chat {
    margin-top: 10px;
    //padding: 0 16px;

    .bottom {
      width: 100%;
      padding: 0 16px 16px;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;


      .textarea {
        flex: 1;
        margin-right: 8px;
      }
    }

  }

}
</style>
